<template>
    <div>
    <div class="logo"></div>
    <van-search
    v-model="value"
    shape="round"
    background="#f00"
    placeholder="请输入搜索关键词"
    />
<!-- 轮播图开始 -->
    <div class="banner">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="banner in banners"
                 :key="banner.id">
                    <img :src="banner.image" alt="">
                </div>
            </div>
      <div class="swiper-pagination"></div>
    </div>
    </div>
<!-- 轮播图结束 -->    

 <!-- 推荐分类开始 -->
     <div class="types">
        <div class="type" 
        v-for="type in types" 
        :key="type.id"
        @click="totype(type.name)">
            <img :src="type.icon" alt="">
            <p>{{type.name}}</p>
        </div>  
      </div>


      <div class="typePros"> 
        <!-- 每个 商品和分类 的大盒子 --> 
        <div class="typePro" v-for="typePro in tp" :key="typePro.id"> 
        <!-- 分类名称 --> 
        <h3><img src="../../assets/l-icon.png" />{{typePro.name}}<img src="../../assets/r-icon.png"
        /></h3> 
        <!-- 每个分类下的 每个商品 --> 
        <div class="product" v-for="product in typePro.products" :key="product.id"> 
        <!-- 商品来源 --> 
        <p class="supplier">本商品产自{{product.supplier}}</p> 
        <!-- 商品图片 --> 
        <img :src="product.banner" alt=""> 
        <!-- 商品名称 --> 
        <p class="proname">{{product.name}}</p> 
        <!-- 商品规格 --> 
        <p class="specs">商品规格：{{product.specs}}</p> 
        <!-- 商品价格 --> 
        <p class="price">价格：￥{{product.price}}元</p> 
        <!-- 加入购物车 --> 
        <van-button @click="addcart(product)" round type="warning" color="linear-gradient(to right, #ff6034, #ee0a24)">加入购物车</van-button> 
        </div> 
    </div> 
    </div> 




  </div>   

</template>


<script>
import Vue from 'vue';
import { Pagination, Search } from 'vant';
import Swiper from 'swiper';
import 'swiper/swiper-bundle.min.css'
import { Button } from 'vant';
import { Tabbar, TabbarItem } from 'vant';
import Myfooter from '@/components/Myfooter'
import {getBanner, getTypes, getTP} from '@/request' 
import { addCart } from '@/request'
import { getCookie } from '@/utils/cookie'
import { Toast } from 'vant';

Vue.use(Button);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Search);
export default {
    components:{
        Myfooter:Myfooter
    },
  data() {
    return {
      value: '', 
       //定义轮播图数据
      banners: [],
        // 定义分类数据
      types: [],
      tp:[]
    }
  },
  created() {
        this.qingqiu()
    },
    // 函数
    methods: {
        async qingqiu() {
            var banners = await getBanner()
            var types = await getTypes()
            var tp = await getTP()
            this.banners = banners
            this.types = types
            this.tp = tp
        },

        //添加购物车的函数
    addcart(product){
        var _this = this
        //判断用户是否登录
        var username = getCookie('username')
        //没有登录就强行跳转到登录
        if(!username){
            Toast.fail({
                message: '请先登录！',
                onClose(){
                    //先将当前路径存储在本地存储 - 做标记
                    window.localStorage.setItem('url','/types')
                    _this.$router.push('/my/login')
                }
            });
            return
        }   
        //如果登录了就准备数据
        //整理数据: 当前商品的数据+用户信息+商品的数量
        product.username = username
        product.number = 1
        //发送请求

        //将product中的id删除
        if(product.id){
            product.pid = product.id
            delete product.id
        }
        addCart(product).then(data =>{
              // console.log(data);
              Toast.success(data.msg)
    })
    }, 
        totype(typename){
            // this.$router.push('/types')
            this.$router.push({
                path:'/types',
                query:{
                    typename: typename
                }
            })
        }
       
    },
    // 一刷新页面有了html结构后要执行的代码
    mounted() {
        
    },
    // 当数据更新，重新渲染页面后会执行的代码，就放在updated中
    updated() {
        var swiper = new Swiper(".mySwiper", {
            loop: true,
            autoplay:true,
            pagination: {
                el: ".swiper-pagination",
            }
        });
     
    }

    } 

</script>

<style scoped>
.logo{
    background-color: #f00;
    background-image:url('../../assets/logo.png');
    background-size: 100% 100%;
    height: 50px;
}
.swiper {
  width:100%;
  height: 100%;
}

.swiper-slide {
   text-align: center;
   font-size:18px;
/* 给外面的大盒子设置相对定义和高度。
还需要引入swiper的js和css： */

 background: #fff;
 /* Center slide text vertically */

 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
}

.swiper-slide img {
 display:block;
 width: 100%;
 height: 100%;

}
.banner{
    position: relative ;
    height: 200px;
}

.types{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background-color: #fff;
  margin: 10px 10px 0;
}

.type img{
  width: 50px;
}

.type{
  margin: 10px 10px;
}

.typePro>h3{
  text-align: center;
}

.typePro>h3 img{
  vertical-align: middle;
  margin: 0 20px;
}

.product{
  background-color: #fff;
  padding: 10px;
  margin: 5px 10px;
  border-radius: 20px;
}

.product .supplier{
  font-size: 18px;
  text-align: center;
}

.product img{
  width: 100%;
  border-radius: 20px;
}

.product .proname, .product .specs{
  font-size: 18px;
  padding: 0 10px;
}

.product .price{
  font-size: 20px;
  font-weight: bold;
  color: #f00;
  padding-left: 10px;
}

.van-button{
  color :rgb(227, 7, 7);
  display: block;
  width: 80%;
  font-size: 20px;
  margin: 0 auto;
}
</style>